<template>
  <div>
    <div class="app-head">
      <el-form>
        <el-row type="flex" justify="start">
          <el-col :span="10">
            <el-form-item label="时间戳" label-width="120px">
              <el-date-picker
                v-model="startDate"
                :picker-options="pickerOptions1"
                :editable="false"
                :style="tiemLen"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择开始时间"
                class="timeLength"
                @change="checkStartTime"
              />
              至
              <el-date-picker
                v-model="endDate"
                :picker-options="pickerOptions1"
                :editable="false"
                :style="tiemLen"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择结束时间"
                @change="checkTime"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务平台账号" label-width="130px">
              <el-input v-model.trim="userId" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="TempToken" label-width="100px">
              <el-input v-model="tempToken" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="2" class="flexd">
            <!-- v-powerbtn="{power: 'usercenter-search-search'}" -->
            <el-button
              v-powerbtn="{power: platSearch}"
              size="mini"
              round
              type="primary"
              icon="el-icon-search"
              @click="search"
            >查询</el-button>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-col :span="10">
            <el-form-item label="鉴权结果" label-width="120px">
              <el-select ref="vipHeight" v-model="authResult" style="width:90%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option value="1" label="鉴权通过" />
                <el-option value="2" label="鉴权不通过" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="鉴权内容ID" label-width="130px">
              <el-input v-model="contentId" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="异常类型" label-width="100px">
              <el-select v-model="errResult" style="width:90%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option v-for="item of select" :key="item.typeId" :value="item.typeId" :label="item.typeName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" class="flexd">
            <el-button
              v-powerbtn="{power: platSearch}"
              size="mini"
              round
              icon="el-icon-refresh"
              @click="reset"
            >重置</el-button>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-col :span="10">
            <el-form-item label="发起鉴权页面ID" label-width="120px">
              <el-input v-model="pageId" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发起鉴权页面名称" label-width="130px">
              <el-input v-model="pageName" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="鉴权内容名称" label-width="100px">
              <el-input v-model="contentName" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="addBtn">
      <el-button
        v-powerbtn="{power: platReload}"
        type="primary"
        size="mini"
        round
        icon="el-icon-refresh"
        @click="search"
      >刷新</el-button>
      <el-button
        v-powerbtn="{power: platDownload}"
        type="primary"
        size="mini"
        round
        @click="downLoad"
      ><svg-icon icon-class="export" />导出</el-button>
    </div>
    <div class="app-table">
      <el-table :data="newList" border style="width: 100%">
        <el-table-column label="时间戳" min-width="100">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.timestamp" :content="scope.row.timestamp" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.timestamp }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="业务平台账号" min-width="100">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.userId" :content="scope.row.userId" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.userId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="TempToken" min-width="100">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.tempToken" :content="scope.row.tempToken" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.tempToken }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="鉴权结果" min-width="100">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.authResult" :content="scope.row.authResult" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.authResult }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="鉴权内容ID" min-width="100">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.contentId" :content="scope.row.contentId" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.contentId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="鉴权内容名称" min-width="100">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.contentName" :content="scope.row.contentName" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.contentName }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="发起鉴权页面ID" min-width="100">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.pageId" :content="scope.row.pageId" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.pageId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="发起鉴权页面名称" min-width="100">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.pageName" :content="scope.row.pageName" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.pageName }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="异常类型" min-width="100">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.abnormalDescription" :content="scope.row.abnormalDescription" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.abnormalDescription }}</span>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script>
import { getPowerList, getSelect } from '@/api/aaa.js'
import { download } from '@/utils/download2.js'
import powerbtn from '@/directive/powerbtn/index.js'
export default {
  directives: {
    powerbtn
  },
  props: {
    platformId: {
      type: String,
      default: ''
    },
    activeName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      platSearch: '',
      platReload: '',
      platDownload: '',
      startDate: '',
      platformIdReal: '',
      pageid: 0,
      pagecount: 20,
      count: 0,
      tiemLen: '',
      endDate: '',
      pageName: '',
      pageId: '',
      select: [],
      userId: '',
      contentId: '',
      result: '',
      errResult: '',
      contentName: '',
      tempToken: '',
      authResult: '',
      newList: [],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  watch: {
    platformId(newVal) {
      // handleSizeChange(1, 20, newVal)
      this.platformIdReal = newVal
      this.getAjaxList(1, 20, true)
      this.platSearch = 'usercenter-' + this.platformId + '|userlogs-search' // 搜索
      this.platReload = 'usercenter-' + this.platformId + '|userlogs-reload' // 刷新
      this.platDownload = 'usercenter-' + this.platformId + '|userlogs-download' // 导出
      console.log('鉴权业务')
      this.reset()
    },
    activeName(newVal) {
      if (newVal === 'second') {
        this.$nextTick(() => {
          var len = this.$refs.vipHeight.$el.offsetWidth / 2 - 10
          console.log(len)
          this.tiemLen = {
            'width': len + 'px'
          }
        })
        this.reset()
        this.getAjaxList(1, 20, true)
      }
    }
  },
  methods: {
    // 当前页面改变时
    handleSizeChange(num) {
      this.getAjaxList(1, num)
    },
    search() {
      this.getAjaxList(this.pageid, this.pagecount)
    },
    downLoad() {
      var data = {
        tempToken: this.tempToken,
        userId: this.userId,
        abnormalCode: this.errResult,
        platformId: this.platformIdReal,
        authResult: this.authResult,
        contentId: this.contentId,
        contentName: this.contentName,
        pageId: this.pageId,
        pageName: this.pageName,
        beginTime: this.startDate,
        endTime: this.endDate
      }
      download(data, '/aaaFlow/authentication/export.do', '鉴权流水')
    },
    reset() {
      this.tempToken = ''
      this.userId = ''
      this.errResult = ''
      this.authResult = ''
      this.contentId = ''
      this.contentName = ''
      this.pageId = ''
      this.pageName = ''
      this.startDate = ''
      this.endDate = ''
    },
    // 跳转某页
    handleCurrentChange(num) {
      this.getAjaxList(num, this.pagecount)
    },
    getAjaxList(pageId, pageCount, status) {
      var data = {
        tempToken: this.tempToken,
        userId: this.userId,
        abnormalCode: this.errResult,
        platformId: this.platformIdReal,
        authResult: this.authResult,
        contentId: this.contentId,
        contentName: this.contentName,
        pageId: this.pageId,
        pageName: this.pageName,
        beginTime: this.startDate,
        endTime: this.endDate,
        pageid: pageId,
        pagecount: pageCount
      }
      if (status) {
        var data1 = {
          functionType: 'authentication'
        }
        getSelect(data1).then(res => {
          if (res.resultCode === '0000') {
            this.select = res.data.list
            getPowerList(data).then(res => {
              if (res.resultCode === '0000') {
                var data = res.data.list
                this.count = res.data.count
                this.newList = data
              }
            })
          }
        })
      } else {
        getPowerList(data).then(res => {
          if (res.resultCode === '0000') {
            var data = res.data.list
            this.count = res.data.count
            this.newList = data
          }
        })
      }
    },
    // 校验开始时间
    checkStartTime(time) {
      const newStr = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(newStr, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.endDate !== null) {
            end = new Date(this.endDate.replace(newStr, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(newStr, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.startDate = ''
          }
        }
      }
    },
    // 校验结束时间
    checkTime(time) {
      var selectTime
      const newStr = new RegExp('-', 'g')
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(newStr, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.endDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var start
          if (this.startDate !== null) {
            start = new Date(this.startDate.replace(newStr, '/')).getTime()
          } else {
            start = ''
          }
          var end = new Date(time.replace(newStr, '/')).getTime()
          if (end < start) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.endDate = ''
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.el-form-item{
  margin-bottom: 2px;
}
.addBtn{
  margin-top: 5px;
}
</style>
